// 抽屉事件
import React from 'react';
import './Drawer.css';

// 定义 DrawerProps 接口，指定 Drawer 组件的属性类型
interface DrawerProps {
    isOpen: boolean; // 控制抽屉是否打开的状态
    onClose: () => void; // 关闭抽屉的回调函数
    content: React.ReactNode; // 抽屉中要渲染的内容
}

// 抽屉的打开和关闭都依赖于按钮的点击事件。点击 "关闭" 按钮或 "打开" 按钮都会调用 onClose 函数，从而改变 isOpen 的值
const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, content }) => {
    return (
        <div>
            {/* 通过点击打开关闭或者按钮来调用 onClose 函数 从而改变 isOpen 的值 */}
            <button onClick={onClose} className='open-drawer'>
                 {/* isOpen 属性来控制抽屉的打开和关闭状态。 */}
                {isOpen ? '>' : '>'} 
            </button>
            {/* 只有当isOpen为true时,才会渲染抽屉的内容 */}
            {isOpen && (
                <div className="drawer">
                    {/* 关闭抽屉的按钮 */}
                    <button onClick={onClose} className='close-drawer'>
                        <i className='iconfont icon-xiangzuojiantou'></i> {/* 关闭图标 */}
                    </button>
                    {/* 在抽屉打开时，用户可以看到内容区域。 */}
                    <div className="drawer-content">
                        {content} {/* 渲染传递进来的内容 */}
                    </div>
                </div>
            )}
        </div>
    );
};


export default Drawer;
